import React,{Component} from "react"

import Loading from "../../components/loading"
import Tipmsg from "../../components/tipmsg"
import "./index.css"


import {uploadPhoto,getUserInfo,updateUserinfo} from "../../api/course.js"

class Index extends Component{
    constructor(props){
        super(props);
        this.state = {
            imgSrc:"",
            file:"",
            username:"",
            showLoading:false,
            msg:"",
            showTip:false
        }
    }
    

    componentDidMount(){
        console.log(JSON.parse(localStorage.getItem("courseUserinfo")))
        this.setState({
            imgSrc:JSON.parse(localStorage.getItem("courseUserinfo")).ThumbnailUrl
        })
    }

    closeHandl(){
        this.setState({
             showTip:false
        })
    }

    sendHandl(){
        var token = JSON.parse(localStorage.getItem("courseUserinfo")).AccessToken;
        let {username} = this.state;
        if(username.trim()===""){
            this.setState({
                msg:"请输入昵称",
                showTip:true
            })
            return;
        }
        

        this.setState({showLoading:true})
        


        getUserInfo(token).then(res=>{
            let userInfo = res.data;
            userInfo.NickName = this.state.username;
            userInfo.Name = this.state.username;
            updateUserinfo(token,userInfo).then(res=>{
                console.log(res.data);
                this.setState({showLoading:false});
                res.data.AccessToken = JSON.parse(localStorage.getItem("courseUserinfo")).AccessToken;  
                localStorage.setItem("courseUserinfo", JSON.stringify(res.data));
                window.location.href = "https://apps.ixingban.com/fanscourse";
            }).catch(err=>{
                //debugger
                //console.log(err)
                this.setState({
                    showLoading:false,
                    msg:err.response.data.ErrorMessage || "请使用合适的内容",
                    showTip:true
                })
            })
        })
      
    }


    changeImg(ev){
        var files = ev.target.files[0];
        var token = JSON.parse(localStorage.getItem("courseUserinfo")).AccessToken;
        var formdata = new FormData();
        formdata.append('image',files);
        this.setState({
            showLoading:true
        })
        uploadPhoto(token,formdata).then(res=>{
            this.setState({
                showLoading:false
            })
        }).catch(err=>{
            this.setState({
                msg:"请使用合适的内容",
                showTip:true,
                showLoading:false
            })
            
        })

        var fr = new FileReader();
        var _this = this;   
        fr.readAsDataURL(files);//读取文件
  
        fr.onload = function(e){
            _this.setState({
                imgSrc:this.result
            })    
        }
    }


	render(){
		return(
            <div className="edit">
                <div className="edit-header">
                    <span onClick={()=>{
                        window.location.href = "https://apps.ixingban.com/fanscourse";
                    }}></span>
                    <h3>编辑个人信息</h3>
                </div>

                <div className="uploadimg">
                    <img src={this.state.imgSrc} alt=""/>
                    <input type="file" onChange={this.changeImg.bind(this)}/>
                </div>
                <p className="tip">上传头像</p>

                <p className="form">
                   <input type="text" 
                          placeholder="请输入您的昵称" 
                          value={this.state.username}
                          onChange={(ev)=>{this.setState({username:ev.target.value})}}/></p>
                <span className="sendbtn" onClick={this.sendHandl.bind(this)}>确定</span>
                
                {this.state.showLoading?<Loading />:null}
                {this.state.showTip?<Tipmsg msg={this.state.msg} closeHandl={this.closeHandl.bind(this)}/>:null}
                
            </div>
		)
	}
}

export default Index;